<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>主页</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card class="box-card">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-card class="box-card">
            <el-date-picker v-model="selectDate2" placeholder="请选择考勤日期" value-format="yyyy-MM-dd"></el-date-picker>
            <el-button type="primary" size="small" @click="getAllAttendanceList()">查询当日考勤</el-button>
            <el-table :data="allAttendanceList" style="width: 100%">
              <el-table-column type="index" label="OA编号" width="100"></el-table-column>
              <el-table-column prop="empName" label="员工姓名" width="100"></el-table-column>
              <el-table-column prop="attendanceTime" label="上班打卡时间" :formatter="dateFormat"></el-table-column>
              <el-table-column prop="closeTime" label="下班打卡时间" :formatter="dateFormat"></el-table-column>
              <el-table-column prop="workTime" label="工作时间"></el-table-column>
              <el-table-column prop="overtimeHours" label="加班状态"></el-table-column>
              <el-table-column prop="attendanceStatus" label="出勤状态"></el-table-column>
            </el-table>

            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="queryInfo.pageNum"
              :page-sizes="[5, 16, 24, 32]"
              :page-size="queryInfo.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total">
            </el-pagination>
          </el-card>
        </el-col>

        <el-col :span="12">
          <el-card class="box-card">
            <div class="cal">
              <el-calendar v-model="value">
                <template
                  slot="dateCell"
                  slot-scope="{date, data}">
                  <div :class="data.isSelected ? 'is-selected' : ''" @click="attendanceBtn(data)">
                    {{ data.day.split('-').slice(1).join('/') }} {{ data.isSelected ? '✔️' : '' }}
                    <div v-for="item in attendCountListByUserList">
                      <div v-if="(item.months).indexOf(data.day.split('-').slice(1)[0])!==-1">
                        <div v-if="(item.days).indexOf(data.day.split('-').slice(2).join('-'))!==-1">
                          <div v-if="item.attendanceNum===1" class="li-00">
                            <i class="el-icon-check"></i>
                          </div>
                          <div v-if="item.absentNum===1" class="li-01">
                            <i class="el-icon-error"></i>
                          </div>
                          <div v-if="item.busNum===1" class="li-02">
                            <i class="el-icon-suitcase"></i>
                          </div>
                          <div v-if="item.leaveNum===1" class="li-03">
                            <i class="el-icon-toilet-paper"></i>
                          </div>
                        </div>
                      </div>

                    </div>
                  </div>


                </template>
              </el-calendar>
            </div>
            <div>
              <el-button type="primary" size="small" @click="setAttendanceStatus" :disabled="this.attendBtnVisible">签到
              </el-button>
              <el-button type="primary" size="small" @click="setCloseStatus" :disabled="this.closeBtnVisible">签退
              </el-button>
              <el-button type="primary" size="small" @click="generateAttdance">生成当日考勤</el-button>
              <el-button type="primary" size="small" @click="dogenerateAttendanceStatus">生成当日考勤结果</el-button>
            </div>
          </el-card>
        </el-col>
        <el-dialog title="考勤信息" :visible.sync="attendanceDialogVisible" width="30%">
          <el-descriptions v-model="attendanceListByIndex">
            <el-descriptions-item label="上班打卡时间">
              {{ attendanceListByIndex.attendanceTime }}
            </el-descriptions-item>
            <el-descriptions-item label="下班打卡时间">
              {{ attendanceListByIndex.closeTime }}
            </el-descriptions-item>
            <el-descriptions-item label="加班状况">
              {{ attendanceListByIndex.overtimeHours }}
            </el-descriptions-item>
            <el-descriptions-item label="出勤状态">
              {{ attendanceListByIndex.attendanceStatus }}
            </el-descriptions-item>
          </el-descriptions>
          <span slot="footer" class="dialog-footer">
          <el-button @click="attendanceDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="attendanceDialogVisible = false">确 定</el-button>
          </span>
        </el-dialog>


      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-card class="box-card">
            <iframe scrolling="no" src="https://tianqiapi.com/api.php?style=tt&skin=sogou" frameborder="0" width="590"
                    height="98" allowtransparency="true"></iframe>
          </el-card>
        </el-col>
        <el-col :span="12" style="color: #e4e4e4">
          <el-card class="box-card">
            <el-tabs stretch @tab-click="handleClick">
              <el-tab-pane label="每日考勤">
                <div>
                  <el-date-picker
                    v-model="selectDate2"
                    type="date"
                    placeholder="选择日期"
                    value-format="yyyy-MM-dd">
                  </el-date-picker>
                  <el-button @click="getPie">查询每日考勤</el-button>
                </div>
                <div id="main" style="width:100% ;height:400px;">

                </div>
              </el-tab-pane>
              <el-tab-pane label="用户考勤" >

                <div id="main1" style="width:100% ;height:400px;">

                </div>
              </el-tab-pane>
            </el-tabs>

          </el-card>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
/* eslint-disable */
import moment from "moment";
import {toDate} from "element-ui/src/utils/date-util";

export default {
  data() {
    return {
      //出勤表单的分页查询
      queryInfo: {
        userRole: '',
        empId: '',
        date: '',
        query: '',
        pageNum: 1,
        pageSize: 5
      },
      arr: [],
      chartsData: [],
      chartsData1: [],
      //打卡按钮可见
      attendBtnVisible: false,
      closeBtnVisible: false,
      selectDate2: '',
      index: '',
      CurTime: moment().format("yyyy-MM-DD"),
      empId: '',
      value: '',
      allAttendanceList: [],
      attendanceList: {
        attendanceIndex: '',
        id: '',
        attendanceTime: '',
        closeTime: '',
        overtimeHours: '',
        workTime: '',
        empId: '',
        attendanceStatus: '',
      },
      attendanceListByIndex: [],
      //根据用户查询所有一个月的考情统计信息返回数据
      attendCountListByUserList: {
        absentNum: '',
        attendanceDay: '',
        attendanceNum: '',
        busNum: '',
        empId: '',
        id: '',
        leaveNum: '',
        months: '',
        days: '',
      },
      attendanceDialogVisible: false,
      total: 0,
    }
  },
  updated() {

  },
  mounted() {

  },
  beforeMount() {

  },
  created() {
    this.getToday()
    this.getPie()
    this.attendCountListByUser()
    this.getAllAttendanceList()
  },

  methods: {
    handleSizeChange(pageSize) {
      this.queryInfo.pageSize = pageSize
      this.getAllAttendanceList()
    },
    handleCurrentChange(pageNum) {
      this.queryInfo.pageNum = pageNum
      this.getAllAttendanceList()
    },
    handleClick(tab, event) {
      if (tab.index == 1) {
        this.getPie1()
      }
    },
    attendanceBtn(data) {
      setTimeout(() => {
        this.selectByIndex(data);
      }, 0)
    },
    async attendCountListByUser() {
      const {data: result} =
        await this.$http.get(`/user/getAttendCountListByUser/${this.$cookies.get('empId')}`)
      if (result.status !== 200) return this.$message.error("日历数据查询结果失败")
      this.attendCountListByUserList = result.data
    },
    //查询当天所有人的考勤记录
    async getAllAttendanceList() {
      this.queryInfo.date = this.selectDate2
      const {data: result} =
        await this.$http.get('/user/getAllAttendanceList', {
          params: this.queryInfo
        })
      if (result.status !== 200) return this.$message.error("考勤结果查询失败")
      if (result.data == null) return this.$message.error("今天无考勤记录")
      this.$message.success("考勤结果查询成功")
      this.allAttendanceList = result.data.rows
      this.total = result.data.total
    },
    async dogenerateAttendanceStatus() {
      const {data: result} =
        await this.$http.put(`/user/dogenerateAttendanceStatus/${this.selectDate2}`)
      if (result.status !== 200) return this.$message.error("考勤结果生成失败")
      this.$message.success("考勤结果生成成功")
      // this.allAttendanceList = result.data
      await this.getAllAttendanceList();
    },
    //实现根据index查询对应考勤记录
    async selectByIndex(data) {
      this.index = this.$cookies.get('empId') + data.day
      const {data: result} =
        await this.$http.get(`/user/getAttendanceByIndex/${this.index}`)
      if (result.status !== 200) return this.$message.error("考勤结果查询失败")
      if (result.data == null) return this.$message.error("今天无考勤记录")
      this.$message.success("考勤结果查询成功")
      this.attendanceListByIndex = result.data
      this.attendanceDialogVisible = true
      if (this.attendanceListByIndex.attendanceTime !== null) this.attendBtnVisible = true
      if (this.attendanceListByIndex.closeTime !== null) this.closeBtnVisible = true
    },
    async generateAttdance() {
      const {data: result} =
        await this.$http.post('/user/generateAttdance')
      console.log(result)
      if (result.status === 201) return this.$message.error("打卡记录生成失败")
      this.$message.success("打卡记录生成成功")
      await this.getAllAttendanceList()
    },
    async setAttendanceStatus() {
      this.attendanceList.empId = this.$cookies.get('empId')
      const {data: result} =
        await this.$http.put('/user/setAttendanceStatus', this.attendanceList)
      if (result.status !== 200) return this.$message.error("上班打卡失败")
      this.$message.success("上班打卡成功")
      // await this.selectByIndex(date)
    },
    async setCloseStatus() {
      this.attendanceList.empId = this.$cookies.get('empId')
      this.attendanceList.attendanceIndex = this.$cookies.get('empId') + this.CurTime
      const {data: result} =
        await this.$http.put('/user/setCloseStatus', this.attendanceList)
      if (result.status !== 200) return this.$message.error("下班打卡失败")
      this.$message.success("下班打卡成功")
    },
    //用于时间格式化
    dateFormat: function (row, column) {
      const date = row[column.property];
      if (date === null) {
        return "";
      }
      return moment(date).format("YYYY-MM-DD HH:mm");
    },
    async getToday() {
      const date = new Date();
      let month = date.getMonth() + 1;
      let strDate = date.getDate();
      if (month >= 1 && month <= 9) {
        month = '0' + month
      }
      if (strDate >= 0 && strDate <= 9) {
        strDate = '0' + strDate
      }
      const curDate = date.getFullYear() + '-' + month + '-' + strDate;
      this.selectDate2 = curDate.toString()
    },
    async getPie() {
      const {data: result} =
        await this.$http.get(`/user/generateAttdanceByday/${this.selectDate2}`)
      if (result.status !== 200) return this.$message.error("考勤统计查询失败")
      this.chartsData = result.data
      if ((this.chartsData[0].value + this.chartsData[1].value + this.chartsData[2].value + this.chartsData[3].value === 0)) return this.$message.error("今日无考勤结果")


      let option = {
        title: {
          text: '考勤统计',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: '50%',
            data: this.chartsData,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };
      let myChart = this.$echarts.init(document.getElementById('main'))
      myChart.setOption(option);
      this.$message.success("考勤统计查询成功")
    },
    async getPie1() {
      const {data: result1} =
        await this.$http.get(`/user/generateAttdanceByUser/${this.$cookies.get('empId')}`)
      if (result1.status !== 200) return this.$message.error("考勤统计查询失败")
      this.chartsData1 = result1.data
      if ((this.chartsData[0].value + this.chartsData[1].value + this.chartsData[2].value + this.chartsData[3].value === 0)) return this.$message.error("今日无考勤结果")
      let option1 = {
        title: {
          text: '考勤统计',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: '50%',
            data: this.chartsData1,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };
      let myChart1 = this.$echarts.init(document.getElementById('main1'))
      myChart1.setOption(option1);
      this.$message.success("考勤统计查询成功")
    },
  }
}
</script>

<style lang="less" scoped>
.text {
  font-size: 14px;
}

.item {
  padding: 18px 0;
}

.cal /deep/ .el-calendar-table .el-calendar-day {
  width: 30px;
  height: 80px;
}

.is-selected {
  color: #1989FA;
}

.date-content .text {
  width: 20px;
  height: 20px;
  line-height: 20px;
  display: inline-block;

}

.li-00 {
  background: rgb(0, 228, 0) !important;
  color: #000;
}

.li-01 {
  background: rgb(255, 0, 0) !important;
  color: #000;
}

.li-02 {
  background: rgb(255, 126, 0) !important;
  color: #000;
}

.li-03 {
  background: rgb(255, 225, 0) !important;
  color: #000;
}

</style>
